<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>母婴商城</title>
  <link rel="stylesheet" type="text/css" href="/res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="/res/layui/css/layui.css">
  <script type="text/javascript" src="/res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

</head>
<style>

  .uu ul{ list-style:none;}
  .uu ul li{ float:left; line-height:20px; text-align:center; width:120px;}
  .uu a:hover{ color:#F00; background-color: burlywood;}
  .uu ul li ul li{ float:none;background-color:#eee;}
  .uu  ul li ul{ display:none;}
</style>

<body id="list-cont">
  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="#">首页</a>
      </p>
      <div class="sn-quick-menu">
        <div >
          <li class="layui-nav-item" lay-unselect="">
            <div class="uu">
              <div style="margin-right: 5px;">
                <img id="userImg"  th:if="${session.userImg != null}" th:src="${session.userImg}"  class="layui-nav-img">
              </div>
              <div style="margin-right: 0px;margin-top: 3px">
                <ul>
                  <li style="" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                    <div id="username" style="color: crimson;margin-right: 3px;font-size: 24px" th:text="${session.userName}"></div>
                    <ul>
                      <li style="margin-right: 0px;margin-top: 3px">
                        <a href="/goout">注销</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>

            </div>
            <!--<dl class="layui-nav-child">-->
              <!--<dd><a href="javascript:;">修改信息</a></dd>-->
              <!--<dd><a href="javascript:;">安全管理</a></dd>-->
              <!--<dd><a href="javascript:;">退了</a></dd>-->
            <!--</dl>-->
          </li>
        </div>
        <div class="login"><a href="/login.html"><p th:text="${session.userName!=null?'':'登录'}"></p>&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color:coral;margin-right: 6px;font-size: 15px" href="/myself">个人中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color: coral;margin-right: 6px;font-size: 15px" href="/showShopCart">购物车</a><span th:text="${size}"></span></div>
        <div class="sp-cart myorder"><a href="/showOrder">&nbsp;&nbsp;&nbsp;我的订单</a></div>
  </div>
    </div>
  </div>


  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="#" title="母婴商城">
            <img src="/res/static/img/logo.png">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="/goodsController/indexSearch" class="layui-form" novalidate method="post"  >
            <input type="text" name="content" required  lay-verify="required"  autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo" type="submit">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>
<div class="content">
  <div class="main-nav">
    <div class="inner-cont0">
      <div class="inner-cont1 w1200">
        <div class="inner-cont2">
          <a href="/show" class="active">所有商品</a>
          <a href="/bulk">今日折扣</a>
          <a href="/information">母婴资讯</a>
          <a href="/about">关于我们</a>
        </div>
      </div>
    </div>
  </div>
  <div class="category-con">
    <div class="category-inner-con w1200">
      <div class="category-type">
        <h3>全部分类</h3>
      </div>
      <!--菜单显示/叶虽-->
      <div class="category-tab-content">
        <div class="nav-con ">
          <ul class="normal-nav layui-clear" id="muen">
            <li class="nav-item" th:each="lm:${classify}">
              <div class="title" th:text="${lm.classifyName}"  ></div>
              <p th:each="ln:${speciesList}">
                <span th:if="${lm.classifyId == ln.classId}">
                  <a th:href="@{'/specieIddSearch?content=' +${ln.speciesId}}" th:text="${ln.speciesName}" th:onclick="'javascript:goRead(\''+${ln.speciesId}+'\')'"></a>
                </span>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="category-banner">
      <div class="w1200">
        <img src="/res/static/img/banner1.jpg">
      </div>
    </div>
  </div>
  <div class="floors">
    <div class="sk">
      <div class="sk_inner w1200">
        <div class="sk_hd">
          <a href="javascript:;">
            <img src="/res/static/img/s_img1.jpg">
          </a>
        </div>


          <!--今日必抢-->
          <div class="sk_bd">
            <div class="layui-carousel" id="test1">
              <div carousel-item>
                <div class="item-box" id="rob">



                  <div class="item">
                    <a href="/toDetail"><img src="/res/static/img/s_img2.jpg"></a>
                    <div class="title">宝宝五彩袜棉质舒服</div>
                    <div class="price">
                      <span>￥49.00</span>
                      <del>￥99.00</del>
                    </div>
                  </div>



                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>



    <!--谢安建-->
    <!--热销推荐展示-->

    <div class="hot-recommend-con" id="hotGoods">

    </div>



    <!--分类推荐-->
    <div class="product-cont w1200" id="product-cont" >

    </div>



    <!--更多展示-->
    <div class="product-list-box" id="product-list-box">
      <div class="product-list-cont w1200">
        <h4>更多推荐</h4>
        <div class="product-item-box layui-clear" id="footerList">


        </div>
      </div>
    </div>
  </div>

  <!--底部信息栏-->
  <div class="footer">
    <div class="ng-promise-box">
      <div class="ng-promise w1200">
        <p class="text">
          <a class="icon1" href="javascript:;">7天无理由退换货</a>
          <a class="icon2" href="javascript:;">满99元全场免邮</a>
          <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
        </p>
      </div>
    </div>
    <div class="mod_help w1200">                                     
      <p>
        <a href="javascript:;">关于我们</a>
        <span>|</span>
        <a href="javascript:;">帮助中心</a>
        <span>|</span>
        <a href="javascript:;">售后服务</a>
        <span>|</span>
        <a href="javascript:;">母婴资讯</a>
        <span>|</span>
        <a href="javascript:;">关于货源</a>
      </p>
      <p class="coty">母婴商城版权所有 &copy; 2018-2030</p>
    </div>
  </div>
  <script type="text/javascript" href="/js/jquery-1.12.4.js"></script>
  <script type="text/javascript"></script>
      <script>
          window.onload = function () {
          layui.use(['jquery'], function(jquery) {
              var $ = layui.jquery;

              //谢安建
              //加载更多的推荐
              $.ajax({
                  url: "/MoreRecommend",
                  // 请求类型
                  type: "GET",
                  // 成功的回调
                  success: function (jsonGoodsList) {
                      var goodsList = $.parseJSON(jsonGoodsList);
                      var div = "";
                      for (var i = 0; i < goodsList.length; i++) {
                          div += "<div class=\"list-item\" style='width: 230px;height: 300px'>";
                          div += " <a href= \"/details?id=" + goodsList[i].goodsId + "\"><img style='width: 160px;height: 160px' src=\"" + goodsList[i].consultImgUrl + "\"></a>";
                          div += "<p>" + goodsList[i].goodsDescribe + "</p>";
                          div += "<span>￥" + goodsList[i].price + "</span>";
                          div += "</div>";
                      };
                      $("#footerList").html(div);
                  }
              });
              //谢安建
              //加载分类推荐
              $.ajax({
                  url: "/classifysRecommend",
                  // 请求类型
                  type: "GET",
                  // 成功的回调
                  success: function (jsonGoodsList) {
                      var goodsList = $.parseJSON(jsonGoodsList);
                      var classifysRecommend = "";
                      var className= ["宝宝服饰","奶粉辅食","宝宝用品"];
                      for (let i = 1; i < 4; i++) {
                          classifysRecommend += "<div class=\"product-item product-item" + i + " layui-clear\"><div class=\"left-title\"><h4><i>" + i + "F</i></h4><img src=\"/res/static/img/icon_gou.png\"><h5>"+className[i-1]+"</h5></div>";
                          classifysRecommend += "<div class=\"right-cont\"><a href=\"javascript:;\" class=\"top-img\"><img src=\"/res/static/img/img12.jpg\" alt=\"\"></a><div class=\"img-box\">";

                          for (var j = 0; j < 5; j++) {
                              classifysRecommend += "<a href= \"/details?id="+goodsList[(i-1)*5+j].goodsId+ "\"><img style='width: 199px; height: 197px' src=\"" + goodsList[(i-1)*5+j].consultImgUrl + "\"></a>";
                          }
                          classifysRecommend += "</div></div></div>";
                          $("#product-cont").html(classifysRecommend);
                      }
                  }
              });
              // 谢安建
              // 加载销量最多的到热销榜
              // $.ajax({
              //     url: "/hotRecommend",
              //     // 请求类型
              //     type: "GET",
              //     // 成功的回调
              //     success: function (hotRecommend) {
              //         var hot =$.parseJSON(hotRecommend);
              //         var hotHtml = "<div class=\"hot-con1 w1200 layui-clear\"><div class=\"item\"><h4>热销推荐</h4><div class=\"big-img\">";
              //         hotHtml+="<a href=\"/details?id="+hot[0].goodsId+"\"><img style='width: 242px;height: 192px' src=\""+hot[0].consultImgUrl+"\"></a></div><div class=\"small-img\">";
              //         hotHtml+="<a href=\"/details?id="+hot[1].goodsId+"\"><img style='width: 100px;height: 80px' src=\""+hot[1].consultImgUrl+"\" alt=\"\"></a></div></div><div class=\"item\"><div class=\"top-img\">";
              //         hotHtml+="<a href=\"/details?id="+hot[2].goodsId+"\"><img style='width: 350px;height: 246px' src=\""+hot[2].consultImgUrl+"\"></a></div><div class=\"bottom-img\">";
              //         hotHtml+="<a href=\"/details?id="+hot[3].goodsId+"\"><img style='width: 168px;height: 200px' src=\""+hot[3].consultImgUrl+"\"></a>";
              //         hotHtml+="<a class=\"baby-cream\" href=\"/details?id="+hot[4].goodsId+"\"><img style='width: 168px;height: 200px' src=\""+hot[3].consultImgUrl+"\"></a></div></div><div class=\"item item1 margin0 padding0\">";
              //         hotHtml+="<a href=\"details?id="+hot[5].goodsId+"\"><img style='width: 390px;height: 242px' src=\""+hot[3].consultImgUrl+"\"></a>";
              //         hotHtml+="<a href=\"details?id="+hot[6].goodsId+"\"><img style='width: 390px;height: 242px' class=\"btm-img\" src=\""+hot[3].consultImgUrl+"\"></a></div></div>";
              //         $("#hotGoods").html(hotHtml);
              //     }
              // });

          })
      };


layui.config({
    base: '../res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','carousel','jquery'],function(){
      var carousel = layui.carousel,
     mm = layui.mm,
          $=layui.jquery;
     var option = {
        elem: '#test1'
        ,width: '100%' //设置容器宽度
        ,arrow: 'always'
        ,height:'298' 
        ,indicator:'none'
      }


      //谢安建
      //今日必抢加载数据
    $.ajax({
        url: "/willRob",
        // 请求类型
        type: "GET",
        // 成功的回调
        success: function (jsonGoodsList) {
            var goodsList = $.parseJSON(jsonGoodsList);
            var rob = "";
            rob+="<div carousel-item>";
            for(var j = 0 ; j<(Math.ceil(goodsList.length/4));j++){
                rob+="<div class=\"item-box \">";
                for (var i = j*4; i < ((4*(j+1)>goodsList.length)?goodsList.length:(4*(j+1))); i++) {
                    rob += "<div class=\"item\" style='width: 190px;height: 261px'>";
                    rob += "<a href=\"/details?id="+goodsList[i].goodsId+"\"><img src=\""+goodsList[i].consultImgUrl+"\"></a>";
                    rob += "<div class=\"\" style='width: 190px;height: 50px'><h6>"+goodsList[i].goodsName+" </h6></div>";
                    rob += "<div class=\"price\"><span>￥"+goodsList[i].price+"</span><del>￥"+goodsList[i].price+"</del></div></div>";
                };
                rob+="</div>";
            }
            rob+="</div>";
            $("#test1").html(rob);
            carousel.render(option);
            //element.render('nav');
        }
    });
      carousel.render(option);
      // 模版引擎导入
     // var ins = carousel.render(option);
     // var html = demo.innerHTML;
     // var listCont = document.getElementById('list-cont');
     // // console.log(layui.router("#/about.html"))
     //  mm.request({
     //    url: '../json/index.json',
     //    success : function(res){
     //      console.log(res)
     //      listCont.innerHTML = mm.renderHtml(html,res)
     //      ins.reload(option);
     //    },
     //    error: function(res){
     //      console.log(res);
     //    }
     //  })
    

});
  </script>
<script>
  function displaySubMenu(li) {

    var subMenu = li.getElementsByTagName("ul")[0];

    subMenu.style.display = "block";

  }

  function hideSubMenu(li) {

    var subMenu = li.getElementsByTagName("ul")[0];

    subMenu.style.display = "none";

  }

</script>
</body>
</html>